<template>
  <div>
    <div class="squareTop">
      <div class="squareTop-tit">
        <router-link
          tag="span"
          class="iconfont icon-arrow-left-bold"
          :to="'/home'"
        ></router-link
        >歌单广场
      </div>
      <div class="squareTop-bar">
        <ul>
          <!-- 分类栏 -->
          <li
            :class="[{ active: catalogueIndex == index }]"
            @click="catalogueFun(index)"
            v-for="(item, index) in catalogue"
            :key="index"
          >
            {{ item }}
          </li>
        </ul>
      </div>
    </div>
    <!-- 默认显示页 -->
    <div class="squareSongContent" v-show="catalogueIndex == 0">
      <div class="loadShade" v-if="!qualityPlaylist">
        <van-loading
          class="loading"
          type="spinner"
          color="#969799"
          size="54px"
        />
      </div>
      <!-- 用户的专属歌单 -->
      <div class="squareSongList" v-if="squareSongList">
        <div class="top">
          <h2 class="text">用户的专属歌单</h2>
        </div>
        <ul>
          <router-link
            tag="li"
            v-for="item in squareSongList"
            :to="'/songList?id=' + item.id"
            :key="item.id"
          >
            <div class="img">
              <div class="playNum">
                <span class="iconfont icon-24gl-play">
                  {{
                    item.playCount >= 100000000
                      ? Math.trunc(item.playCount / 100000000) + "亿"
                      : Math.trunc(item.playCount / 10000) + "万"
                  }}</span
                >
              </div>
              <img :src="item.picUrl + '?param=140y140'" alt="" />
            </div>
            <p>{{ item.name }}</p>
          </router-link>
        </ul>
      </div>

      <!-- 优质歌单精选 -->
      <div class="qualityPlaylist" v-if="qualityPlaylist">
        <div class="top">
          <h2 class="text">优质歌单精选</h2>
        </div>
        <ul>
          <router-link
            tag="li"
            v-for="item in qualityPlaylist"
            :to="'/songList?id=' + item.id"
            :key="item.id"
          >
            <div class="img">
              <div class="playNum">
                <span class="iconfont icon-24gl-play">{{
                  item.playCount >= 100000000
                    ? Math.trunc(item.playCount / 100000000) + "亿"
                    : Math.trunc(item.playCount / 10000) + "万"
                }}</span>
              </div>
              <img :src="item.picUrl + '?param=140y140'" alt="" />
            </div>
            <p>{{ item.name }}</p>
          </router-link>
        </ul>
      </div>
    </div>
    <!-- 其他歌单 -->
    <div class="otherContent" v-show="catalogueIndex != 0">
      <!-- <div class="loadShade" v-if="!otherList">
                <van-loading class="loading" type="spinner" color="#969799" size="54px" />
            </div> -->
      <ul v-if="otherList">
        <router-link
          tag="li"
          v-for="item in otherList"
          :to="'/songList?id=' + item.id"
          :key="item.id"
        >
          <div class="img">
            <div class="playNum">
              <span class="iconfont icon-24gl-play">
                {{
                  item.playCount >= 100000000
                    ? Math.trunc(item.playCount / 100000000) + "亿"
                    : Math.trunc(item.playCount / 10000) + "万"
                }}</span
              >
            </div>
            <img :src="item.coverImgUrl + '?param=140y140'" alt="" />
          </div>
          <p>{{ item.name }}</p>
        </router-link>
      </ul>
    </div>
  </div>
</template>

<script>
import { getsongList, getBoutiqueList } from "../api/home";

export default {
  data() {
    return {
      squareSongList: null, //用户的专属歌单
      qualityPlaylist: null, //优质歌单精选
      catalogue: [
        "推荐",
        "综合",
        "华语",
        "流行",
        "共享歌单",
        "轻音乐",
        "电子",
        "摇滚",
        "官方",
        "精品",
      ], // 目录
      catalogueIndex: 0,
      catalogueName: null,
      otherList: null, //其他歌单
    };
  },
  methods: {
    getsongListFun() {
      getsongList().then((data) => {
        this.squareSongList = data.result.slice(6, 12);
        this.qualityPlaylist = data.result.slice(12, 18);
        // console.log("用户的专属歌单===>", this.squareSongList);
        // console.log("优质歌单精选===>", this.qualityPlaylist);
      });
    },
    getBoutiqueListFun() {
      getBoutiqueList({ cat: this.catalogueName }).then((data) => {
        this.otherList = data.playlists;
        // console.log("用户的点击的歌单===>", this.catalogueName);
        // console.log("用户的点击的歌单===>", data);
      });
    },
    // z状态栏切换
    catalogueFun(index) {
      this.catalogueIndex = index;
      this.getBoutiqueListFun();
    },
  },
  created() {
    this.getsongListFun();
  },
  watch: {
    catalogueIndex: function () {
      this.catalogueName = this.catalogue[this.catalogueIndex];
    },
  },
};
</script>

<style lang="less" scoped>
.squareTop {
  z-index: 100;
  padding: 0 16px;
  background: #f8f8f8;
  position: sticky;
  top: 0;
  left: 0;
  .squareTop-tit {
    height: 54px;
    line-height: 54px;
    font-size: 16px;
    span {
      margin-right: 14px;
      font-size: 23px;
      vertical-align: -4px;
    }
  }
  .squareTop-bar {
    height: 37px;
    line-height: 37px;
    width: 100%;
    background: #f8f8f8;
    ul::-webkit-scrollbar {
      display: none;
    }
    ul {
      overflow: auto;
      display: flex;
      height: 40px;
      li {
        font-size: 14px;
        flex-shrink: 0;
        padding: 0 3px;
        color: #555555;
        margin-right: 28px;
        &.active {
          color: #060606;
          position: relative;
          &::after {
            position: absolute;
            left: 0px;
            bottom: 10px;
            content: "";
            display: inline-block;
            width: 100%;
            height: 7px;
            background: rgba(211, 14, 14, 0.5);
            border-radius: 3px;
          }
        }
      }
    }
  }
}

.squareSongList {
  background: white;
  border-radius: 0 0 12px 12px;
  .top {
    padding: 23px 16px 0 16px;
    margin-bottom: 14px;
    h2 {
      font-weight: bold;
    }
  }
  ul {
    margin-left: 16px;
    width: 92%;
    height: 42%;
    display: flex;
    padding-top: 4px;
    flex-wrap: wrap;
    // padding: 0 16px;
    justify-content: space-between;

    li {
      // flex: 0 0 106px;
      flex-shrink: 0;
      // width: 110px;
      width: 30%;
      // height: 171px;

      // height: 50%;
      margin-right: 6px;
      &:nth-of-type(3),
      &:nth-of-type(6) {
        margin-right: 0px;
      }
      .img {
        box-shadow: 0px -2px 1px #f2f2f2;
        width: 100%;
        border-radius: 14px;
        overflow: hidden;
        position: relative;
        .playNum {
          display: inline-block;
          color: white;
          background: rgba(100, 100, 100, 0.6);
          font-size: 12px;
          border-radius: 20px;
          position: absolute;
          top: 1px;
          right: -2px;
          transform: scale(0.8);
          span {
            vertical-align: bottom;
            display: inline-block;
            transform: scale(0.8);
          }
        }
        img {
          width: 100%;
        }
      }
      p {
        font-size: 12px;
        margin-top: 6px;
        margin-bottom: 18px;
        color: #1c1c1c;
        display: -webkit-box;
        overflow: hidden;
        white-space: normal;
        text-overflow: ellipsis;
        word-wrap: break-word;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
      }
    }
  }
}

// 优质歌单精选
.qualityPlaylist {
  background: white;
  border-radius: 0 0 12px 12px;
  .top {
    padding: 12px 16px 0 16px;
    margin-bottom: 10px;
    h2 {
      font-weight: bold;
    }
  }
  ul {
    margin-left: 16px;
    display: flex;
    padding-top: 4px;
    // padding: 0 16px;
    overflow-y: scroll;

    li {
      width: 28.7%;
      flex-shrink: 0;
      margin-right: 10px;
      .img {
        box-shadow: 0px -2px 1px #f2f2f2;
        width: 100%;
        border-radius: 14px;
        overflow: hidden;
        position: relative;
        .playNum {
          display: inline-block;
          color: white;
          background: rgba(100, 100, 100, 0.6);
          font-size: 12px;
          border-radius: 20px;
          position: absolute;
          top: 1px;
          right: -2px;
          transform: scale(0.8);
          span {
            vertical-align: bottom;
            display: inline-block;
            transform: scale(0.8);
          }
        }
        img {
          width: 100%;
        }
      }
      p {
        font-size: 12px;
        margin-top: 6px;
        margin-bottom: 18px;
        color: #1c1c1c;
        display: -webkit-box;
        overflow: hidden;
        white-space: normal;
        text-overflow: ellipsis;
        word-wrap: break-word;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
      }
    }
  }
}

// 其他页面的显示
.otherContent {
  padding-top: 20px;
  ul {
    margin-left: 16px;
    width: 92%;
    height: 42%;
    display: flex;
    padding-top: 4px;
    flex-wrap: wrap;
    // padding: 0 16px;
    justify-content: space-between;

    li {
      // flex: 0 0 106px;
      flex-shrink: 0;
      // width: 110px;
      width: 30%;
      // height: 171px;

      // height: 50%;
      margin-right: 6px;
      &:nth-of-type(3),
      &:nth-of-type(6) {
        margin-right: 0px;
      }
      .img {
        box-shadow: 0px -2px 1px #f2f2f2;
        width: 100%;
        border-radius: 14px;
        overflow: hidden;
        position: relative;
        .playNum {
          display: inline-block;
          color: white;
          background: rgba(100, 100, 100, 0.6);
          font-size: 12px;
          border-radius: 20px;
          position: absolute;
          top: 1px;
          right: -2px;
          transform: scale(0.8);
          span {
            vertical-align: bottom;
            display: inline-block;
            transform: scale(0.8);
          }
        }
        img {
          width: 100%;
        }
      }
      p {
        font-size: 12px;
        margin-top: 6px;
        margin-bottom: 18px;
        color: #1c1c1c;
        display: -webkit-box;
        overflow: hidden;
        white-space: normal;
        text-overflow: ellipsis;
        word-wrap: break-word;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
      }
    }
  }
}
</style>
